<script lang="ts" setup>
import type { TreeProps } from 'ant-design-vue';
import type { DataNode } from 'ant-design-vue/es/tree';

import { ref, watch } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import EditProvinceModal from './edit-province-modal.vue';

const props = withDefaults(
  defineProps<{
    showAction?: boolean;
  }>(),
  {
    showAction: false,
  },
);

const [BaseEditProvinceModal, baseEditProvinceModalApi] = useVbenModal({
  connectedComponent: EditProvinceModal,
});

const searchValue = ref('');

function dig(path = '0', level = 4) {
  const list: TreeProps['treeData'] = [];
  for (let i = 0; i < 10; i += 1) {
    const key = `${path}-${i}`;
    if (i === 1) {
      const treeNode: DataNode = {
        title: key,
        key,
      };
      if (level > 0) {
        treeNode.children = dig(key, level - 1);
      }

      list.push(treeNode);
    }
  }
  return list;
}

const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
watch(selectedKeys, () => {
  // console.log('selectedKeys', selectedKeys);
});
watch(checkedKeys, () => {
  // console.log('checkedKeys', checkedKeys);
});

function handleEdit(row?: any) {
  baseEditProvinceModalApi.setData({
    isUpdate: true,
    record: row || {},
  });
  baseEditProvinceModalApi.open();
}
</script>
<template>
  <div class="h-full">
    <BaseEditProvinceModal />

    <a-space v-if="props.showAction">
      <a-button type="primary" @click="handleEdit()">添加</a-button>
      <a-button type="primary">同步</a-button>
      <a-button danger type="primary">批量删除</a-button>
      <a-button type="primary">展开</a-button>
    </a-space>

    <a-input
      v-model:value="searchValue"
      class="my-2"
      placeholder="输入省市区名称搜索"
    />
    <a-tree
      v-model:checked-keys="checkedKeys"
      v-model:selected-keys="selectedKeys"
      :tree-data="dig()"
      checkable
      default-expand-all
    >
      <template #title="{ title }">
        <div class="flex w-full flex-row justify-between">
          <div>{{ title }}</div>
        </div>
      </template>
    </a-tree>
  </div>
</template>

<style lang="scss" scoped>
:deep(.ant-tree-treenode) {
  width: 100%;
}
:deep(.ant-tree-node-content-wrapper) {
  width: 100%;
}
</style>
